<template>
  <div>
    <div style="margin-bottom:10px">
        <a-button @click="otherFun" type="primary">表格外获取选中</a-button>
    </div>
    <i-vxe-table ref="iVxeTableRef" :tableData="tableData" @selectCheckBox="selectCheckBox" @selectCheckFun="selectCheckFun">
    </i-vxe-table>
          <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IVxeTable } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import {
    TableDataInterFace,
    PageInfoInterFace,
    ResultInterFace
} from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
interface AppResult {
  id: string;
  appDesc: string;
  appId: string;
  appName: string;
  appSecret: string;
  iconPath: string;
  status: string;
  verify: string;
}

export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const iVxeTableRef = ref()
        const dataList = [
            {
                id: '1085556743692288',
                appName: '系统管理',
                appId: 'auth',
                appSecret: 'auth',
                iconPath: 'iconcedaohang_quanxianguanli',
                verify: '1',
                status: '0',
                appDesc:
          '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
                dr: '0'
            },
            {
                id: '1086054423068672',
                appName: '产品管理',
                appId: 'product',
                appSecret: 'product',
                iconPath: 'iconcedaohang_chanpinzhongxin',
                verify: '0',
                status: '0',
                appDesc: '产品管理',
                dr: '0'
            },
            {
                id: '2106618124156928',
                appName: '营销获客',
                appId: 'channel',
                appSecret: 'channel',
                iconPath: 'iconcedaohang_yingxiaohuoke',
                verify: '0',
                status: '1',
                appDesc: '文都营销获客',
                dr: '0'
            },
            {
                id: '8185375542173753',
                appName: '线上资源',
                appId: 'consult',
                appSecret: 'consult',
                iconPath: 'iconcedaohang_zixungongju',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            },
            {
                id: '8185375542173755',
                appName: '订单管理',
                appId: 'order',
                appSecret: 'order',
                iconPath: 'iconcedaohang_xuankezhongxin',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            },
            {
                id: '8185375542173761',
                appName: '数据统计',
                appId: 'statistics',
                appSecret: 'statistics',
                iconPath: 'iconcedaohang_shujutongji',
                verify: '0',
                status: '0',
                appDesc: '',
                dr: '0'
            }
        ]
        const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'appName',
                        title: '应用名称',
                        fixed: 'left'
                    },
                    {
                        field: 'appId',
                        title: '应用ID'
                    }
                ], // 表头配置
                data: [] // 数据集合
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            },
            titleOperation: [
                {
                    label: '获取选中',
                    isShow: true,
                    buttonFun: 'selectCheckFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            authControl: {
                isCheckBox: true, // 是否显示复选框
                toolbarCustom: true // 展示自定义
            }
        })
        const selectCheckBox = (list:any, row:any) => {
            console.log(list, row)
        }
        const libDocData: LibDocInterface = {
            title: '自定义表格组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { IVxeTable } from 'wd-platform-library'"
                },
                {
                    label: '创建表格对象',
                    type: 'pre',
                    value: `
const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'appName',
                        title: '应用名称',
                        fixed: 'left'
                    },
                    {
                        field: 'appId',
                        title: '应用ID'
                    }
                ], // 表头配置
                data: [] // 数据集合
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            },
            titleOperation: [
                {
                    label: '获取选中',
                    isShow: true,
                    buttonFun: 'selectCheckFun'
                },
                {
                    label: '获取选中',
                    isShow: true,
                    position: 'right',
                    buttonFun: 'selectCheckFun'
                }
            ],
            authControl: {
                isCheckBox: true, // 是否显示复选框
                toolbarCustom: true // 展示自定义
            }
})`
                },
                {
                    label: '关键代码:展示',
                    type: 'pre',
                    value: `
authControl: {
        isCheckBox: true, // 是否显示复选框
}`
                },
                {
                    label: '关键代码:表头按钮回调获取',
                    type: 'pre',
                    value: `
titleOperation: [
        {
            label: '获取选中',
            isShow: true,
            buttonFun: 'selectCheckFun'
        },
        {
            label: '获取选中',
            isShow: true,
            position: 'right',
            buttonFun: 'selectCheckFun'
        }
]
//回调
const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList.length)
}`
                },
                {
                    label: '复选框选中默认回调',
                    type: 'pre',
                    value: `
<i-vxe-table ref="iVxeTableRef" :tableData="tableData" @selectCheckBox="selectCheckBox">
const selectCheckBox = (list:any, row:any) => {
    console.log(list, row)
}`
                },
                {
                    label: '关键代码:其他方式获取',
                    type: 'pre',
                    value: 'iVxeTableRef.value.getSelectionEvent()'
                }
            ]
        }
        const selectCheckFun = (dataList: Array<any>) => {
            alert('获取选中' + dataList)
        }
        const otherFun = () => {
            alert('获取选中' + iVxeTableRef.value.getSelectionEvent())
        }
        return {
            selectCheckBox,
            otherFun,
            selectCheckFun,
            tableData,
            iVxeTableRef,
            libDocData
        }
    },
    components: {
        IVxeTable,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
